var that;
// 创建一个类 实现切换 添加 删除 编辑 四项功能
class Tab {
  constructor(id) {
    that = this;
    // 获取元素
    this.box = document.querySelector(id);
    // 获取 + 号
    this.add = this.box.querySelector(".tabadd");
    // 获取li父元素
    this.ul = this.box.querySelector(".fisrstnav ul:first-child");
    // 获取section父元素
    this.tabsCon = this.box.querySelector(".tabscon");
    this.init();
  }
  // 动态更新节点
  updateNode() {
    // 获取li
    this.lis = this.box.querySelectorAll("li");
    // 获取section
    this.sections = this.box.querySelectorAll("section");
    // 获取删除按钮
    this.remove = this.box.querySelectorAll(".icon-guanbi");
    // 获取span
    this.spans = this.box.querySelectorAll(".fisrstnav li span:first-child");
  }
  // 初始化样式
  init() {
    this.updateNode();
    this.add.onclick = this.addTab;
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i;
      this.lis[i].onclick = this.toggleTab;
      this.remove[i].onclick = this.removeTab;
      this.spans[i].ondblclick = this.editTab; // 鼠标双击事件
      this.sections[i].ondblclick = this.editTab;
    }
  }
  // 清除样式
  clearClass() {
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = "";
      this.sections[i].className = "";
    }
  }
  // tab切换
  toggleTab() {
    // 排他思想 干掉所有人 保留自己
    that.clearClass();
    this.className = "liactive";
    that.sections[this.index].className = "conactive";
  }
  // 添加
  addTab() {
    // 排他思想 干掉所有人 保留自己
    that.clearClass();
    // 创建li section
    var li =
      '<li class="liactive"><span>狗神</span><span class="iconfont icon-guanbi"></span></li>';
    var section = '<section class="conactive">666</section>';
    // 追加到父元素里面
    that.ul.insertAdjacentHTML("beforeend", li);
    that.tabsCon.insertAdjacentHTML("beforeend", section);
    // 初始化 将创建的元素  加入事件中
    that.init();
  }
  // 删除按钮
  removeTab(e) {
    // 阻止冒泡事件
    e.stopPropagation();
    // 获取li的suoyinh
    var index = this.parentNode.index;
    that.lis[index].remove();
    that.sections[index].remove();
    // 初始化 让li的个数为已知  加入事件中
    that.init();
    // 当删除的不是选中的那个li 那么让选中的那个li保持
    if (document.querySelector(".liactive")) return;
    // 当选中的这个li被删除时 让它前面的那个li被选中
    index--;
    // 当index为负数时要判断 if或逻辑与的方式
    that.lis[index] && that.lis[index].click();
  }
  // 编辑功能
  editTab() {
    // 第一步获取span的内容
    var str = this.innerHTML;
    // 双击禁止文字选中
    window.getSelection
      ? window.getSelection().removeAllRanges()
      : document.selection.empty();
    // 双击后 span里面添加一个文本框
    this.innerHTML = '<input type="text" />';
    // 获取input
    var input = this.children[0];
    input.value = str; // 将span原始内容赋值给文本框
    input.select(); // input的内容选中状态
    // input 失去焦点事件
    input.onblur = function () {
      this.parentNode.innerHTML = this.value;
    };
    // 键盘按下空格事件
    input.onkeyup = function (e) {
      if (e.keyCode === 13) {
        this.blur();
      }
    };
  }
}
new Tab("#tab");
